/** @jsxImportSource @emotion/react */
import * as React from "react";
import {useContext} from "react";
import {Table, TableBody, TableHead, Text,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import UserContext from "../../../routing/UserContext";
import {
    Each_ZdSetting, tabIBlistCb, tabIDateCb, tabIUserSign, useRaftTableViewer, useTableEditor
} from "../../hook/useRepTableEditor";

const tail注解 = <Text css={{"@media print": {fontSize: '0.75rem'}}}>
    注：变更日期处应当由型式试验机构盖章。
</Text>;

const setConfigP =(user:any)=> [['序号','s',45], ['变更前单位名称','p',240,tabIBlistCb([],2)],
    ['变更后单位名称','n',240,tabIBlistCb([],2)],
    ['变更日期','d',70,tabIDateCb()], ['承办人签章','name',80,tabIUserSign(user),'sgm'] ] as Each_ZdSetting[];

const itemA单位名变: string[] = ['名变表' ];
export const UnitnameModify =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, refWidth}: InternalItemProps, ref
    ) => {
        const {user} = useContext(UserContext);
        const config = React.useMemo(() => {
            return setConfigP(user);
        }, [user]);
        const [getInpFilter] = useMeasureInpFilter(null, itemA单位名变,);
        const {inp, setInp} = useItemInputControl({ref});
        const headview=<Text variant="h5">
         变更单位名称
        </Text>;
        const [render名变表]=useTableEditor({inp, setInp,  headview,
                  config: config, table: '名变表',  maxRf:3 });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text>{label}：</Text>
            {render名变表}
            <hr/>
            {tail注解}
        </InspectRecordLayout>;
});

const config名变=setConfigP(undefined);
//？？为何变单位：
export const UnitnameModifyVw =({orc, rep, op,title}: { orc: any, rep: any, op?: boolean,title:string}
) => {
    //嵌套对象?.sgm?.name 导致报错：Objects are not valid as a React child (found: object with keys {sgm}).
    const [renderRows, renderHead]=useRaftTableViewer(config名变, orc?.名变表,1,
        false, true, true);
    return <>
        <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
            <Text id='UnitnameModify' variant="h4" css={{
                textAlign: op ? undefined : 'center', marginTop: '1rem',
            }}>{title}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op ? '记录' : '报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["4.6%", "37%", "%", "10.4%", "10.1%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
            <TableHead>
                <RepLink rep={rep} tag={'UnitnameModify'}>
                    {renderHead}
                </RepLink>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'UnitnameModify'}>
                    {renderRows}
                </RepLink>
            </TableBody>
        </Table>
        {tail注解}
    </>;
};
